<div class="tab-view">
  <!-- Tab Bar -->
  <div class="tab-bar">
    <ul class="nav nav-tabs" ui-sortable="sortableOptions" ng-model="tabs">
      <li tab-id="{{ tab.id }}" class="tab" ng-repeat="tab in tabs" ng-class="{ active: tab.active }" ng-click="activateTab(tab, $event)" ng-right-click="openTabContextMenu(tab, $event)">
        <a class="clearfix" href="#">
          <span class="tab-active-line"></span>
          <i class="tab-icon {{ tab.iconClassName }}"></i> {{ tab.name }}
          <i class="tab-close fa fa-times" ng-click="closeTab(tab, $event)"></i>
        </a>
      </li>
    </ul>
  </div>
  <!-- Tab Panes -->
  <div class="tab-panes">
    <div class="no-connections" ng-show="!tabs.length && !connections.length">
      <p class="center">
        You don't have any connections in your workplace yet...
        <br> Click <a href="#" ng-click="showConnections(null, $event)">here</a> to add a connection.
      </p>
    </div>
    <div class="tab-pane" ng-repeat="tab in tabs" ng-class="{ active: tab.active }" ng-show="tab.active">
      <!-- Page Tabs -->
      <div class="tab-pane-inner {{ tab.name.toLowerCase() }}-tab-pane" ng-if="tab.type === TAB_TYPES.PAGE" ng-include="tab.src">
      </div>
      <!-- Query Tabs -->
      <div class="tab-pane-inner query-tab-pane" ng-if="tab.type === TAB_TYPES.QUERY">
        <query database="tab.database" database-tab="tab" default-collection="tab.defaultCollection"></query>
      </div>
    </div>
  </div>
</div>
